<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<p>
    vue对象内部的组件中的点击方法，回到外层的Vue对象的点击方法：通过内部方法中的this.$emit("外部方法名",传参)方法.
    而且调用的外部方法必须是纯小写
</p>

<div id="app" >
    <button-counter title="自增按钮1" @outsideclickId="outsideClick" >这是全局注册组件</button-counter>
    <test></test>
</div>

<script type="text/javascript">
    Vue.component('button-counter', {
        props:['title'],
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="plusOne">当前点击{{title}}次数：{{count}} </button>',
        methods:{
            plusOne:function(){
                this.count++;   
                this.$emit('outsideclickId',this.count)                 
            }
        }

    });

    var appVue = new Vue({
        el: '#app',
        data:{},
        methods:{
            outsideClick: function(e){
                console.log(e);                    
            }
        },
        components:{
            test:{
                template: "<h1>这是局部注册组件</h1>"
            }
        }

    });
</script>